<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增' : '线下买回操作'" width="600px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
      <!-- <el-form-item label="订单号">
        <el-input v-model="form.orderNo" :disabled="true" style="width: 370px;" />
      </el-form-item> -->
      <el-form-item label="寄存商品">
        <el-input v-model="form.depositGoods" :disabled="true" />
      </el-form-item>
      <el-form-item label="实际买回金额">
        <el-input v-model="form.actualRedeemAmount" :disabled="true"/>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="支付金额" prop="finalPayAmount">
            <el-input v-model="form.finalPayAmount" @input="limitInput($event,'finalPayAmount')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优惠金额" prop="redeemDiscountAmount">
            <el-input v-model="form.redeemDiscountAmount" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="凭证图片">
          <MaterialList v-model="picArr" type="image" :num="1" :width="100" :height="100" />
        </el-form-item>
      <el-form-item label="买回备注" prop="redeemRemarks">
        <el-input v-model="form.redeemRemarks" placeholder="客户已线下买回" rows="5" type="textarea" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import picUpload from '@/components/pic-upload'
import MaterialList from '@/components/material'
import { redeemRemark } from '@/api/syOrderInfo'
export default {
  components: { picUpload, MaterialList },
  props: {
    isAdd: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      uploadPictures:[],
      picArr: [],
      loading: false, dialog: false,
      form: {
        id: '',
        orderNo: '',
        depositGoods:'',
        finalPayAmount:'',
        redeemDiscountAmount:'',
        actualRedeemAmount:'',
        redeemRemarks: '',
        redeemVoucher:'',
      },
      rules: {
        finalPayAmount: [
          { required: true, message: '支付金额不能为空', trigger: 'blur' }
        ],
        redeemDiscountAmount: [
          { required: true, message: '优惠金额不能为空', trigger: 'blur' }
        ],
        redeemRemarks: [
          { required: true, message: '买回备注不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    picArr: function(val) {
      let uuid = new Date().getTime();
      let imgJson = {
        imgUrl: val.join(','),
        uuid: uuid
      }
      this.uploadPictures.push(imgJson);
      this.form.redeemVoucher = JSON.stringify(this.uploadPictures);
    }
  },
  methods: {
    limitInput(value, name) {
      this.form[name] =
          ("" + value) // 第一步：转成字符串
        .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
        .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
        .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
        .match(/^\d*(\.?\d{0,2})/g)[0] || null; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
        if(this.form.finalPayAmount){
          this.form.redeemDiscountAmount = (parseFloat(this.form.finalPayAmount) - parseFloat(this.form.actualRedeemAmount)).toFixed(2);
        }else{
          this.form.redeemDiscountAmount = "0.00";
        }
    },
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      this.loading = true
      redeemRemark(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.crud.toQuery();
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        orderNo: '',
        depositGoods:'',
        finalPayAmount:'',
        actualRedeemAmount:'',
        redeemDiscountAmount:'',
        redeemRemarks:'',
        redeemVoucher:'',
      },
      this.uploadPictures = [];
      this.picArr = [];
    }
  }
}
</script>

<style scoped>

</style>
